<template>
	<view class="cu-bar tabbar bg-white zaiui-footer-fixed">
		<view class="cu-bar tabbar bg-white zaiui-footer-fixed">
			<view class="action" :class="TabID == 0?'text-red':'text-black'" @tap="tabTap(0)">
				<view :class="TabID == 0?'cuIcon-homefill':'cuIcon-home'"></view>
				<text>首页</text>
			</view>
			<view class="action" :class="TabID == 1?'text-red':'text-black'" @tap="tabTap(1)">
				<view :class="TabID == 1?'cuIcon-discoverfill':'cuIcon-discover'"></view>
				<text>发现</text>
			</view>
			<view class="action add-action" @tap="tabTap(2)">
				<button :class="{'cu-btn':true, 'cuIcon-add': true, 'bg-red':true, 'shadow':true,'active2':TabID == 2?true:false}" :animation="animPlus"></button>
				<text>专家在线</text>
			</view>
			<view class="action" :class="TabID == 3?'text-red':'text-black'" @tap="tabTap(3)">
				<view :class="TabID == 3?'cuIcon-shopfill':'cuIcon-shop'">
					<view class="cu-tag badge" v-if="MsgDot"></view>
				</view>
				<text>农贸市场</text>
			</view>
			<view class="action" :class="TabID == 4?'text-red':'text-black'" @tap="tabTap(4)">
				<view :class="TabID == 4?'cuIcon-peoplefill':'cuIcon-people'"></view>
				<text>我的</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'footer-tabbar',
		data() {
			return {
				TabID: 0, MsgDot: false,
				animPlus:undefined,
				animIcon: 'cuIcon-add'
			};
		},
		props: {
			tabID: {
				type: [String,Number],
				default: 0
			},
			msgDot: {
				type: Boolean,
				default: false
			},
		},
		created() {
			this.TabID = this.tabID;
			this.MsgDot = this.msgDot;
		},
		watch: {
			tabID() {
				// if(this.tabID != 2) {
					this.TabID = this.tabID;
				// }
			},
			msgDot() {
				this.MsgDot = this.msgDot;
			}
		},
		methods: {
			tabTap(index) {
				if(index != this.TabID) {
					if(index == 2){
						let animation =  uni.createAnimation()
						animation.rotateZ(90).backgroundColor('rgba(243, 123, 29, 0.42)').step({duration:200});
						this.animPlus = animation.export()
					}else{
						let animation =  uni.createAnimation()
						animation.rotateZ(0).step({duration:200})
						animation.backgroundColor('red').step({duration:100})
						this.animPlus = animation.export()
					}
					this.$emit('tabTap', index);
				}
			}
		}
	}
</script>

<style lang="scss">
	.active2 {
		color: red;
	}
	.active2:before {
		// content: "\e6d8";
	}
	
</style>
